<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="MasterPage.xhtml">
            <ui:define name="deSlide">
            </ui:define>
            <ui:define name="contents">
                <h:form>
                    <script type="text/javascript">
                        function checkItemCart(sizeCart){
                            if(sizeCart > 0){
                                return true;
                            }else{
                                alert('Cart empty!');
                                return false;
                            }
                        }
                    </script>
                    <c:if test="#{cartManager.displayMessage}">
                        <div class="DetailsAlbumMessage">
                            <c:if test="#{cartManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" style="color: white;">#{cartManager.message}</h5>
                            </c:if>
                            <c:if test="#{!cartManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" style="color: red;">#{cartManager.message}</h5>
                            </c:if>
                            #{cartManager.messageEmpty()}
                        </div>
                    </c:if>
                    <table width="775px" style=" padding: 0; margin: 0; margin-left: -40px; margin-top: -11px">
                        <tr>
                            <td colspan="7"><h3 class="DefaultCartH3">Items in your basket</h3>
                            </td>
                        </tr>
                        <tr>
                            <th width="10px">
                                
                            </th>
                            <th>
                                Image
                            </th>
                            <th>
                                Name
                            </th>
                            <th>
                                Price
                            </th>
                            <th>
                                Quantity
                            </th>
                            <th>
                                Money
                            </th>
                            <th>

                            </th>
                        </tr>
                        <ui:repeat value="#{cartManager.listDataStore}" var="listItem">
                            <tr>
                                <td style="width: 5px; text-align: center; margin-bottom: 2px" class="numbercountS">#{masterPageManagerBean.count}</td>
                                <td style="width: 60px; text-align: center;"><a href="DetailsAlbum.xhtml?id=#{listItem.albumID}"><img src="${listItem.albumImage}" alt="" width="40px" height="50px" /></a></td>
                                <td class="DefaultCartName"><a href="DetailsAlbum.xhtml?id=#{listItem.albumID}">#{listItem.albumName}</a></td>
                                <td style="width: 50px; text-align: center;">$#{listItem.albumPrice}</td>
                                <td style="width: 20px; text-align: center;"><h:inputText style="text-align: center;width: 40px;" value="#{listItem.quantity}"></h:inputText></td>
                                <td style="width: 42px; text-align: center;">$#{listItem.quantity*listItem.albumPrice}</td>
                                <td style="width: 24px;"><a onclick="return confirm('You sure want to delete: #{listItem.albumName}?');"
                                                            href="removeCartPage.xhtml?AlbumId=#{listItem.albumID}" style="color: #767676">Delete</a></td>
                            </tr>
                        </ui:repeat>

                        <tr>
                            <td colspan="7" class="DefaultCartSave">
                                <a onclick="return checkItemCart(#{cartManager.cartSize()})" class="DefaultCartSave" href="PersonalAuthenticationInformation.xhtml" >Continue</a>
                                <h:commandLink onclick="return checkItemCart(#{cartManager.cartSize()})" action="#{cartManager.editCart()}" value="Save" ></h:commandLink>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5" class="DefaultCartTotalMoney">Total Money:</td>
                            <td colspan="2" class="DefaultCartTotalMoneys">$ #{cartManager.totalMoney()}</td>
                        </tr>
                    </table>
                    <a href="HistoryOrders.xhtml" style="float: right; padding-right: 3px;text-decoration: underline;
                       font-weight: 600; font-family: arial; color: #e47911">Order History</a>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

